<template>
  <view class="settings">
    <view
      class="flex-row"
      hover-class="hover-default"
      @click="uploadImgsHandler"
    >
      <view class="flex-left">头像</view>
      <view class="flex-right flex align-center">
        <image
          class="avatar"
          mode="aspectFill"
          :src="userInfo.head_img || '/static/default-avatar.png'"
          @click.stop="
            previewImage(userInfo.head_img || '/static/default-avatar.png')
          "
        />
      </view>
    </view>

    <view
      class="flex-row"
      hover-class="hover-default"
      @click="navigateTo('modifyNickname')"
    >
      <view class="flex-left">昵称</view>
      <view class="flex-right">
        {{ userInfo.username || '用户***' }}
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view
      class="flex-row"
      hover-class="hover-default"
      @click="navigateTo('modifyPhoneNumber')"
    >
      <view class="flex-left">手机号</view>
      <view class="flex-right">
        <template>+86 {{ replaceStr(userInfo.phone) }}</template>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view
      class="flex-row"
      hover-class="hover-default"
      @click="navigateTo('modifyPassword')"
    >
      <view class="flex-left">修改密码</view>
      <view class="flex-right">
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view class="flex-row" hover-class="hover-default" v-if="![0, 1, 2, 3].includes(userInfo.authorize)">
      <view class="flex-left">所属组织</view>
      <view class="flex-right">
        {{ userInfo.organization_name || '未绑定组织' }}
      </view>
    </view>
    <view class="flex-row" hover-class="hover-default">
      <view class="flex-left">角色</view>
      <view class="flex-right">
        {{ userStore.role }}
      </view>
    </view>
    <view class="logout" @click="askLogout">退出登录</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import { editUserInfo } from '@/api'
import { replaceStr, uploadFile, previewImage } from '@/utils'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

function navigateTo(route, query = '') {
  uni.navigateTo({
    url: `/pages/profile/${route}/index?${query || ''}`
  })
}

function askLogout() {
  uni.showModal({
    title: '温馨提示',
    content: '确认要退出登录吗？',
    confirmColor: '#377DFF',
    success(res) {
      if (res.confirm) {
        useUserStore().logout()
        uni.navigateBack()
      }
    }
  })
}

function uploadImgsHandler() {
  uni.chooseImage({
    count: 1,
    success: chooseImageRes => {
      const tempFilePaths = chooseImageRes.tempFilePaths
      for (const path of tempFilePaths) {
        uni.showLoading({ title: '正在上传...' })
        uploadFile(path)
          .then(res => {
            editUserInfo({ head_img: res }).then(
              () => (userInfo.value.head_img = res)
            )
          })
          .finally(uni.hideLoading)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.settings {
  background-color: #fff;
  .flex-row {
    height: 112rpx;
    position: relative;
    padding-left: 30rpx;
    padding-right: 30rpx;
    & + .flex-row::after {
      content: '';
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      top: 0;
      border-top: 2rpx solid #efefef;
    }
    .flex-left {
      color: #333;
      font-size: 34rpx;
    }
    .flex-right {
      color: #999;
      font-size: 34rpx;
      .iconfont {
        color: #dbdbdb;
        font-size: 34rpx;
      }
      .avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
  }
  .logout {
    height: 112rpx;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #df5e42;
    font-size: 30rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
